<div
  *ngIf="!lvVirtualScroll"
  class="lv-tree-container"
  [@treeCollapseMotion]="flattenData?.length"
  (@treeCollapseMotion.done)="onAnimationDone($event)"
>
  <ng-container *ngIf="!lvDraggable">
    <ng-container *ngFor="let item of flattenData; let index = index; trackBy: lvTrackBy">
      <ng-container *ngTemplateOutlet="contentItemTpl; context: { $implicit: item, index: index }"></ng-container>
    </ng-container>
  </ng-container>
  <div *ngIf="lvDraggable" cdkDropList (cdkDropListDropped)="drop($event)">
    <ng-container *ngFor="let item of flattenData; let index = index; trackBy: lvTrackBy">
      <div cdkDrag [cdkDragData]="item">
        <!-- 拖动时占位符 -->
        <div class="lv-drag-placeholder" *cdkDragPlaceholder></div>
        <ng-container *ngTemplateOutlet="contentItemTpl; context: { $implicit: item, index: index }"></ng-container>
      </div>
    </ng-container>
  </div>
</div>
<!-- virtual scroll -->
<div class="lv-tree-container" *ngIf="lvVirtualScroll">
  <cdk-virtual-scroll-viewport
    class="lv-tree-virtual-scroll"
    [itemSize]="lvVirtualItemSize"
    [maxBufferPx]="lvVirtualMaxBuffer"
    [minBufferPx]="lvVirtualMinBuffer"
    [style.height]="lvScroll?.y"
    (scrolledIndexChange)="scrolledIndexChange($event)"
    #scrollComponent
  >
    <!-- 控制子元素实例化 -->
    <ng-container *cdkVirtualFor="let item of flattenData; let index = index; trackBy: lvTrackBy; templateCacheSize: 0">
      <ng-container *ngTemplateOutlet="contentItemTpl; context: { $implicit: item, index: index }"></ng-container>
    </ng-container>
  </cdk-virtual-scroll-viewport>
</div>

<!-- 内容区 item template -->
<ng-template #contentItemTpl let-item>
  <lv-tree-node
    [lvData]="item"
    [lvNodeIsStart]="item._lv_isStart"
    [lvIsNodeIsEnd]="item._lv_isEnd"
    [lvShowExpandedIcon]="lvShowExpandedIcon"
    [lvBeforeSelected]="lvBeforeSelected"
    [lvHighlightContent]="lvHighlightContent"
    (lvExpandedChange)="expandedChange($event)"
  ></lv-tree-node>
</ng-template>
